<template>
  <view class="container">
    <uni-section title="新表单弹窗" type="line">
      <view class="example">
        <button type="primary" @click="toggleNewFormPopup()">打开新表单弹窗</button>
      </view>
    </uni-section>
    <uni-popup ref="newFormPopup" background-color="#fff" @change="newFormPopupChange">
      <view class="form-popup-content">
        <uni-forms ref="newFormPopupForm" :modelValue="newFormPopupData" :rules="newFormPopupRules">
          <uni-forms-item label="姓名" required name="name">
            <uni-easyinput v-model="newFormPopupData.name" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="性别" required name="sex">
            <uni-data-checkbox v-model="newFormPopupData.sex" :localdata="sexs" />
          </uni-forms-item>
          <uni-forms-item label="兴趣" required name="hobby">
            <uni-data-checkbox v-model="newFormPopupData.hobby" multiple :localdata="hobbys" />
          </uni-forms-item>
          <uni-forms-item label="自我介绍" name="introduction">
            <uni-easyinput type="textarea" v-model="newFormPopupData.introduction" placeholder="请输入自我介绍" />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submitNewFormPopup()">提交新表单弹窗</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 假设 sexs 和 hobbys 数据如下
const sexs = ref([{ value: '男', text: '男' }, { value: '女', text: '女' }]);
const hobbys = ref([{ value: '阅读', text: '阅读' }, { value: '运动', text: '运动' }]);
// 新增部分：新表单弹窗的数据和方法
const newFormPopup = ref(null);
const newFormPopupData = ref({
  name: '',
  sex: '',
  hobby: [],
  introduction: '',
});
const newFormPopupRules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'change' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  hobby: [
    { required: true, message: '请选择兴趣爱好', trigger: 'change' }
  ]
});

const toggleNewFormPopup = () => {
  newFormPopup.value.open();
};

const newFormPopupChange = (e) => {
  console.log('新表单弹窗状态：' + e.show);
};

const submitNewFormPopup = () => {
  // 在这里添加表单提交的逻辑，例如可以对 newFormPopupData 进行处理，或者发送请求等
  console.log(newFormPopupData.value);
  // 关闭弹窗
  newFormPopup.value.close();
};
</script>

<style scoped>
.form-popup-content {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>